<template>
  <div class="dialog">
    <el-dialog v-model="queryVisible" width="40%" :before-close="handleClose" :modal="false" draggable>
      <div class="dialog-con">
        <div class="dialog-con-top">
          <p>如何进行单位注册？</p>
          <ul>
            <li>1. 填写“单位名称”、“申请人”、“申请人电话”；</li>
            <li>
              2. 下载<a
                style="text-decoration: underline; cursor: pointer"
                href="/青海省无人机综合服务管理平台注册审核表.docx"
                download="青海省无人机综合服务管理平台注册审核表.docx"
                >《申请表》</a
              >
              ；
            </li>
            <li>3. 填写《申请表》，并<span>盖章扫描</span> ；</li>
            <li>
              4 上传 <span>《申请表》</span>扫描件和<span>《身份证复印件》</span>
              。
            </li>
          </ul>
        </div>
        <div class="dialog-con-bottom">
          <p>填写表单<span>注意事项</span></p>
          <ul>
            <li>1. 《申请表》中要求内容均需要填写；</li>
            <li>
              2. 实际经办人与经办人<span>信息须一致</span>，办理业务时须出示相关
              <span>身份证件</span>;
            </li>
            <li>3. 《申请表》<span>一式两份</span>，注册单位与管理单位各存档一份。</li>
          </ul>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose" class="dialog-footer-btn">知道了</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import {ref, onMounted, defineProps, defineEmits} from 'vue';

const queryVisible = ref(true);

const emit = defineEmits(['closeDialog']);

const props = defineProps({
  queryVisible: Boolean,
});

const handleClose = () => {
  emit('closeDialog');
};

onMounted(() => {});
</script>
<style lang="scss" scoped>
.dialog {
  &:deep(.el-dialog__body) {
    padding-bottom: 0;
  }
  &:deep(.el-dialog) {
    background: url(@/assets/img/register/tips_bg.png);
    background-repeat: no-repeat;
    background-position: center center;
  }
  &:deep(.el-dialog__headerbtn .el-dialog__close) {
    color: #fff;
    font-size: 26px;
  }
  &-con {
    &:deep(.el-dialog__close) {
      width: 23px;
      height: 23px;
      background: #ffffff;
    }

    &-top {
      padding: 0 50px;
      overflow: hidden;
      > p {
        font-size: 32px;
        font-weight: 600;
        color: #ffffff;
        margin: 0;
      }
      > ul {
        margin: 0;
        margin-top: 23px;
        padding: 0;
        padding-bottom: 34px;
        > li {
          color: RGBA(174, 202, 246, 1);
          padding-bottom: 10px;
          > a {
            color: #ffffff;
            font-weight: 600;
          }
        }
      }
    }
    &-bottom {
      padding: 50px 50px 0 50px;
      overflow: hidden;
      > p {
        font-size: 24px;
        font-weight: 600;
        color: #333333;
      }
      > ul {
        margin: 0;
        padding: 0;
        > li {
          font-size: 14px;
          padding-bottom: 10px;
          color: #666666;
          > span {
            color: #000;
            font-weight: 600;
          }
        }
      }
    }
  }
  &-footer {
    &-btn {
      width: 120px;
      height: 36px;
      background: #2a5afd;
      border-radius: 45px;
      color: #fff;
      margin-right: 52px;
    }
  }
}
</style>
